<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>

<body>
<div class="page-content">
    <div class="login-form">
        <div class="form-row">
            <div class="title">欢迎使用</div>
        </div>
        <div class="form-row">
            <div class="form-label">账户：</div>
            <div class="form-input">
                <input id="loginInput" type="text" placeholder="请输入登录名"/>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label">密码：</div>
            <div class="form-input">
                <input id="passwordInput" type="password" placeholder="请输入密码"/>
            </div>
        </div>
        <div class="form-row">
            <div id="loginButton" class="login-button">登录</div>
        </div>
    </div>
</div>
</body>
<script>
    let button = document.getElementById("loginButton")
    button.addEventListener("click", function () {
        doLogin()
    })

    function doLogin() {
        let httpRequest = new XMLHttpRequest()
        httpRequest.open("POST", "http://localhost:8801/api/login", true)
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4) {
                if (httpRequest.status == 200) {
                    console.log("登录成功:", httpRequest.response)
                } else {
                    console.log("登录失败:", httpRequest.response)
                }
            }
        }
        const login = document.getElementById("loginInput").value
        const password = document.getElementById("passwordInput").value
        let loginData = new FormData();
        loginData.append("login", login)
        loginData.append("password", password)
        httpRequest.send(loginData)
    }

    function hello() {
        // 定义一个XMLHttpRequest
        let httpRequest = new XMLHttpRequest()
        console.log("第一步")

        console.log("第二步")
        httpRequest.open("GET", "http://localhost:8801/api/hello", true)
        httpRequest.onreadystatechange = function () {
            // http请求状态发生状态时执行
            console.log("onreadystatechange", httpRequest)
            // 完成状态
            console.log("第四步")
            if (httpRequest.readyState == 4) {
                console.log("第四步:请求完成")
                if (httpRequest.status == 200) {
                    console.log("获取数据成功：", httpRequest.response)
                } else {
                    console.error("获取数据失败：", httpRequest.response)
                }
            }
        }
        //发送请求
        httpRequest.send()

        console.log("第三步")
    }

    //链式写法
    // window.onload = () => {
    //     doGet("http://localhost:8801/api/hello").then((res) => {
    //         console.log("获取hello请求结果：", res)
    //     }).catch((error) => {
    //         console.log("hello请求失败结果：", error)
    //     }).finally(() => {
    //         console.log("hello finally")
    //     })
    // }

    //解决链式
    window.onload = async () => {
        try {
            const res = await doGet("http://localhost:8801/api/hello")
            console.log("获取hello请求结果：", res)
        } catch (e) {
            console.log("hello请求失败结果：", e)
        }
    }

    function doGet(url) {
        return new Promise((success, fail) => {
            //发送http请求
            let httpRequest = new XMLHttpRequest()
            httpRequest.open("GET", url, true)
            httpRequest.onreadystatechange = () => {
                if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {
                        success(httpRequest.response)
                    } else {
                        fail(httpRequest.response)
                    }
                }
            }
            httpRequest.send()
        })
    }
</script>
<style>
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100vh;
    }

    .page-content {
        background-color: rgba(99, 99, 99, 0.5);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-form {
        width: 280px;
        height: 400px;
        background-color: #fff;
        padding: 20px;
        box-shadow: 1px 1px 2px #000;
        border-radius: 15px;
    }

    .title {
        font-size: 130%;
        font-weight: bold;
    }

    .login-form .form-row {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
    }

    .form-row .form-input input {
        border: none;
        border-bottom: 1px solid rgba(99, 99, 99, 0.8);
        width: 100%;
    }

    .form-row .form-input input:focus {
        outline: none;
    }

    .login-button {
        padding: 5px 10px;
        background-color: #ed7547;
        text-align: center;
        line-height: 20px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 25px;
    }
</style>

</html>
